<template>
  <div class="add-room-type">
      <h2 class="title">添加房间类型</h2>
      <a-form layout="horizontal" :model="state.type" class="form" v-bind="{labelCol: { span: 4 },wrapperCol: { span: 14 }}">
            <a-form-item label="房间类型">
                <a-input v-model:value="state.type.typeName" />
            </a-form-item>
            <a-form-item :wrapper-col="{ span: 14, offset: 4 }">
                <a-button type="primary" @click="onSubmit" block>
                    新建
                </a-button>
            </a-form-item>
        </a-form>
  </div>
</template>

<script>
import { reactive } from 'vue'
import { getInstance } from '../utils/request'
import { message } from 'ant-design-vue'
import { useStore } from 'vuex'
export default {
    name: "addRoomType",
    setup(){
        const state = reactive({
            type: {
                typeName: ""
            }
        })
        const store = useStore();
        const onSubmit = async () => {
            if(state.type.typeName !== ""){
                let token = localStorage.getItem("token")
                let res = await getInstance(token).post("/type", state.type);
                if(res.code === 0){
                    message.success("新建房间类型成功.")
                    store.dispatch("room/addType", res.data)
                }else{
                    message.error("新建房间类型失败.")
                }
            }else{
                message.warn("信息填写不完善.")
            }
            
        }
        return {
            state,
            onSubmit
        }
    }
}
</script>

<style lang="scss" scoped>
@import "../assets/styles/pages/addRoomType.scss";
</style>